<template>
  <div class="wrapper">
    <div class="top">
      <div class="top-item">
        <span>卡券类型:</span>
        <span>{{ info?.couponType }}</span>
      </div>
      <div class="top-item">
        <span>卡券名称:</span>
        <span>{{ info?.couponName }}</span>
      </div>
      <div class="top-item">
        <span>当前状态:</span>
        <el-switch disabled v-model="info.status" active-value="1" inactive-value="0"></el-switch>
        <el-button type="danger" @click="handleDelete">删除</el-button>
        <el-button
          type="primary"
          @click="router.push({ path: '/cityLevel/cityShop/decoration/editShop', query: { id: info?.shopCode } })"
          >修改</el-button
        >
      </div>
    </div>
    <div class="info">
      <div class="info-left">
        <div class="info-title">动态</div>
        <div class="contentInfo-left">
          <el-timeline style="max-width: 85%">
            <el-timeline-item
              v-for="item in dyamic"
              :key="item.id"
              color="#009688"
              :timestamp="item.status == '1' ? '上架' : '下架'"
              placement="top"
            >
              <div>
                <h5>执行人:{{ item.author }}</h5>
                <span>执行时间: {{ item.createTime }}</span>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <div class="info-right">
        <div class="info-title">活动信息</div>
        <div class="table-container">
          <el-container>
            <el-col :span="6">卡券原价:{{ info?.couponPrice }}</el-col>
            <el-col :span="6">卡券折扣:{{ info?.couponDiscount }}</el-col>
            <el-col :span="6">使用次数:{{ info?.useTimes }}</el-col>
            <el-col :span="6">有效期:{{ info?.expire }}</el-col>
          </el-container>
          <el-container style="margin-top: 15px">
            <el-col :span="24">活动说明:{{ info?.ruleDescribe }}</el-col>
          </el-container>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="tsx" setup name="ShopDetail">
import { Coupon } from "@/api/interface/city/cityMarket/coupon";
import { deleteCouponAPI, getCouponDetailAPI, getCouponRecordAPI } from "@/api/modules/city/cityMarket/coupon/api";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
// 获取详情
const info = ref<Coupon.EditParams>({});
const getDetail = async () => {
  const { code, data, msg } = await getCouponDetailAPI(route.query.id as string);
  if (code == "200") {
    if (data) {
      info.value = data;
    }
  } else {
    ElMessage.error(msg);
  }
};
// 获取动态记录
const dyamic = ref<Coupon.Record[]>([]);
const getDynamic = async () => {
  const { code, data, msg } = await getCouponRecordAPI(route.query.id as string);
  if (code == "200") {
    if (data) {
      dyamic.value = data;
    }
  } else {
    ElMessage.error(msg);
  }
};

// 删除店铺
const handleDelete = () => {
  ElMessageBox.confirm(`确认删除该卡券【${info?.value?.couponName}】吗？`)
    .then(() => {
      dele();
    })
    .catch(() => {
      ElMessage.info("取消删除");
    });
};
const dele = async () => {
  const { code, msg } = await deleteCouponAPI(route.query.id as string);
  if (code == "200") {
    ElMessage.success("删除成功");
    router.push({ path: "/cityLevel/cityMarket/coupons/index" });
  } else {
    ElMessage.error(msg);
  }
};
onMounted(() => {
  if (route.query.id != undefined) {
    getDetail();
    getDynamic();
  }
});
</script>
<style lang="scss" scoped>
.wrapper {
  font-size: 13px;
  .top {
    padding: 15px;
    background-color: white;
    .top-item:nth-last-child(1) {
      float: right;
      margin-top: -5px;
    }
    .top-item {
      display: inline-block;
      margin-right: 10px;
      vertical-align: middle;
      p {
        padding: 8px;
        margin: 0;
        vertical-align: middle;
        .el-image {
          vertical-align: middle;
        }
      }
    }
  }
  .info {
    height: 520px;
    margin-top: 10px;
    .info-left {
      box-sizing: border-box;
      display: inline-block;
      width: 33%;
      height: 100%;
      padding: 15px;
      margin-right: 1%;
      overflow: auto;
      vertical-align: top;
      background: white;
    }
    .info-right {
      box-sizing: border-box;
      display: inline-block;
      width: 66%;
      height: 100%;
      padding: 15px;
      vertical-align: top;
      background: white;
    }
  }
}
.info-title {
  margin-bottom: 10px;
  font-size: 13px;
  color: #009688;
  border-bottom: 1px solid #009688;
}
.pagination-container {
  // display: inline-block;
  float: right;
  margin-top: 20px;
  background-color: white;
}
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-timeline-item__content {
  font-size: 13px;
}
</style>
